<template>
  <div class="input-unit">
    <InputNumber v-model="bindValue" :number="true" v-bind="$attrs" @on-change="handleChanged"></InputNumber>
    <div class="input-append">{{ append }}</div>
  </div>
</template>
<script>
export default {
  name: 'InputNumberWithUnit',
  props: {
    value: {
      type: [Number, String],
      default: () => null
    },
    modelForm: {
      type: Object,
      default: () => ({})
    },
    append: String
  },
  data() {
    return {
      bindValue: 0
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.bindValue = newVal
      },
      immediate: true
    }
  },
  methods: {
    handleChanged(val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="less" scoped>
.input-unit {
  display: flex;
  flex-direction: row;
  width: fit-content;
  //   border: 1px solid #d8d8d8;

  //   /deep/ .ivu-input-number {
  //     border: 0;
  //   }

  .input-append {
    width: 55px;
    height: 32px;
    margin: 0px;
    text-align: center;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    // border: 1px solid #d8d8d8;
    background: #eef0f4;
  }
}
</style>
